<template>
	<div class="box">
		<!-- title -->
		<div class="top">
			<div class="divider_">
				<div class="title">
					<el-divider>
						<span>热门行情</span>
					</el-divider>
				</div>
			</div>
			<div class="more">
				查看更多
			</div>
		</div>
		<!-- 提示 -->
		<div class="tip">
			最低的手续费，最快捷的交易，强劲的 API以及更多
		</div>
		<!-- 列表 -->
		<div class="table">
			<el-table :data="tableData" table-layout="fixed">
				<el-table-column label="名称" align="left">
					<template #default="scope">
						<div class="name_">
							<img :src="scope.row.icon">
							<p>
								<span>{{ scope.row.coin }} </span>
								<span>
									/USDT
								</span>
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column  label="最新价(CNY)"  align="center">
					<template #default="scope">
						<div class="price">
							{{ scope.row.price }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="涨跌幅" align="center">
					<template #default="scope">
						<div :class="scope.row.up ? 'upTrue' : 'upFalse'">
							{{ scope.row.up ? '+' : '-' }}
							{{ scope.row.range }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="24小时走势"  align="center">
					<template #default="scope">
						<div class="line">
							<BrokenLine
							:data="scope.row.labels"
							:color="scope.row.up ? '#03c03c' : '#f00'">
							</BrokenLine>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="right">
					<template #default="scope">
						<div>
							<el-button :color="btnColor"
					type="primary" style="padding:18px 40px;border-radius:10px;">交易</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script lang="ts" setup>
import styles from '@/styles/variables.module.scss';
import BrokenLine from './BrokenLine.vue'
// 按钮颜色
const btnColor = computed(() => {
	return styles.btnThemeColor;
})
const tableData = ref<any>([
	{
		icon: "/home/btc.svg",
		coin: "BTC",
		price: "$ 1,000",
		range: "0.01%",
		up: true,
		labels: ['0', '2', '3', '1']
	},
	{
		icon: "/home/eth.svg",
		coin: "ETH",
		price: "$ 1,000",
		range: "0.01%",
		up: false,
		labels: ['0', '2', '3', '1']
	},
	{
		icon: "/home/trx.svg",
		coin: "TRX",
		price: "$ 1,000",
		range: "0.01%",
		up: true,
		labels: ['0', '2', '3', '1']
	},
	{
		icon: "/home/usdt.svg",
		coin: "USDT",
		price: "$ 1,000",
		range: "0.01%",
		up: true,
		labels: ['0', '2', '3', '1']
	},
	{
		icon: "/home/usdt.svg",
		coin: "USDT",
		price: "$ 1,000",
		range: "0.01%",
		up: true,
		labels: ['0', '2', '3', '1']
	}
])

onMounted(() => {
	
})
</script>
<style lang="scss" scoped>
.box {
	margin-top: 60px;

	// width: 100%;
	.top {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		// width: 100%;
		.divider_ {
			.title {
				width: 40rem;

				span {
					font-size: 3rem;
					font-weight: bolder;
				}
			}
		}

		.more {
			position: absolute;
			left: 100%;
			display: flex;
			align-items: center;

			/* 向左移动子元素的一半宽度，使其居中 */
			width: 64px;
			height: 100%;
			color: $btn-theme-color;
			text-align: right;

			/* 将子元素定位到父元素的右侧 */
			transform: translateX(-100%);
		}
	}

	.tip {
		margin-top: 2vh;
		font-size: 14px;
		color: #999;
		text-align: center;
	}

	.table {
		width: 100%;
		margin-top: 3vh;

		.name_ {
			display: flex;
			align-items: center;
			padding: 20px 0;

			>img{
				width:20px;
			}

			>p{
				margin-left: 10px;

				>span:nth-child(1){
					font-weight: bolder;
				}

				>span:nth-child(2){
					color:#999;
				}
			}
		}

		.price{
			font-size: 16px;
			font-weight: bolder;
		}

		.upTrue{
			color: #03c03c;
		}

		.upFalse{
			color: #f00;
		}

		.line{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 15vw;
			height: 8vh;
		}
	}
}
</style>
